<template>
    <div class="video">
        <div class="item" ref="Essay_ref">
            <div class="tips">
                <div>
                    <img @click="goTop" style="width: 5vw;" :src="base_url + '/assets/svg/gotop.svg'" alt="">

                </div>
                <div>
                    <img @click="goBottom" style="width: 3vw;" :src="base_url + '/assets/svg/gobottom.svg'" alt="">

                </div>
            </div>
            <div class="video_item">
                <video :src="base_url + detail?.video_url" controls style="width: 100%;"> </video>
            </div>
            <div class="other_info">
                <div class="title">{{ detail?.title }}</div>
                <div class="base_info">
                    <div class="left">
                        <img :src="base_url + '/assets/svg/home/essay/timer.svg'" style="width: 7%;margin: 0 0.5vw;"
                            alt="">
                        <span>最后编辑时间:{{ detail?.end_time }}</span>
                    </div>
                    <div class="right">
                        <div class="items">
                            <img :src="base_url + '/assets/svg/home/routine/eye.svg'" style="width: 10%;" alt="">
                            <span>{{ detail?.view }}浏览</span>
                        </div>
                        <div class="items">
                            <img :src="base_url + '/assets/svg/home/routine/comment.svg'" style="width: 10%;" alt="">
                            <span>{{ detail?.comment }}评论</span>
                        </div>
                        <div class="items">
                            <img :src="base_url + '/assets/svg/home/routine/likes.svg'" style="width: 10%;" alt="">
                            <span>{{ detail?.likes.length }}点赞</span>
                        </div>
                    </div>
                </div>
                <div class="rich_text">
                    <Editor style="width: 100%;" v-model="valueHtml" :mode="mode" @onCreated="handleCreated" />
                </div>

                <div class="comment" v-if="discussList.length !== 0">
                    <Com_item v-for="item in discussList" :key="item._id" :item="item"> </Com_item>

                </div>

            </div>
            <div class="send">
                <div class="top">
                    <img :src="edit" alt="">
                    <span>发布一条</span>
                    <el-tag v-if="replay_name" closable type="warning" effect="dark" @close="close_item">
                        回复:{{ replay_name }}
                    </el-tag>
                </div>
                <div class="data">
                    <el-input v-model="textarea" :rows="5" type="textarea" placeholder="留下你的痕迹...." />
                    <el-button style="width: 20%;margin-top: 1vw;font-size: 1vw;" type="primary" size="default"
                        @click="up_disscuss" plain>提交</el-button>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import edit from "@/assets/svg/Editing.svg"
import Com_item from "@/components/Comment_item/Com_item.vue";
//@ts-ignore
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import {add_discuss_count } from "@/apis/web/WebApi"
import { onMounted, ref, shallowRef, nextTick, reactive, watch } from "vue"
import { useRoute } from "vue-router";
import { Get_video_detail, add_view_disscuss } from "@/apis/web/WebApi"
import { type Video_detail } from "@/types/Eassy";
import { format } from "@/utils/formatTime"
import { get_discuss, add_discuss } from '@/apis/web/DiscussApi';
import { user_info } from "@/utils/Local"
import { type Discuss } from '@/types/Discuss';
import { ElMessage } from "element-plus";
import DiscussStore from "@/store/DiscussStore";
const store = DiscussStore()
const replay_name = ref("")
const base_url = import.meta.env.VITE_APP_URL
const Common_user = user_info.Get_info()
const route = useRoute()
const detail = ref<Video_detail>()
const textarea = ref("")
const discussList = ref<any>([])
const Essay_ref = ref()
const discussInfor = reactive<Discuss>({
    article_id: route.params.id as string,
    user_id: Common_user._id,
    comment_text: '',
    comment_date: Date.now(),
    parent_comment_id: '',
    dis_type: "video"
})
const getDiscuss = async () => {
    const result = await get_discuss(route.params.id as string)
    console.log(result)
    discussList.value = result.data
}
onMounted(() => {
    getDiscuss()
    getData(route.params.id as string)
})
const getData = async (id: string) => {
    const result = await Get_video_detail(id)
    result.data.publish_time = format.formatDate(result.data.publish_time)
    result.data.end_time = format.formatDate(result.data.end_time)
    detail.value = result.data
    console.log(detail.value)
    nextTick(() => {
        editorRef.value.setHtml(detail.value?.rich_text)
    })
}
const valueHtml = ref('')
const editorRef = shallowRef()
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    editorRef.value.disable()
}
watch(store.will_reply, () => {
    console.log("比那了")
    replay_name.value = store.will_reply.username
    discussInfor.parent_comment_id = store.will_reply.parent_comment_id

    Essay_ref.value?.scrollTo({ top: Essay_ref.value.scrollHeight, behavior: "smooth" });

})
const mode = ref("default")
const up_disscuss = async () => {

    if (!user_info.Get_info()) {
        ElMessage({
            type: "warning",
            message: "登录后发布"
        })
        return
    }
    const current_id = user_info.Get_info()._id

    if (textarea.value.trim() === '') {
        ElMessage({
            type: "error",
            message: "请输入内容"
        })
        return
    }
    discussInfor.comment_text = textarea.value
    discussInfor.comment_date = Date.now()
    discussInfor.user_id = current_id
    discussInfor.dis_type = 'video'
    const result: any = await add_discuss(discussInfor)

    if (result.code == 200) {

        add_view_disscuss(discussInfor.article_id)
        Object.assign(discussInfor, {
            comment_text: '',
            comment_date: Date.now(),
            parent_comment_id: ''
        })
        ElMessage({
            type: "success",
            message: "评论成功"
        })
        textarea.value = ''
        getDiscuss()
    } else {
        ElMessage({
            type: "error",
            message: "评论失败"
        })
        Object.assign(discussInfor, {
            comment_text: '',
            comment_date: Date.now(),
            parent_comment_id: ''
        })
        textarea.value = ''
    }
}
const close_item = () => {
    store.will_reply.parent_comment_id = ''
    store.will_reply.username = ''
    discussInfor.user_id = Common_user._id
    discussInfor.parent_comment_id = ''
    replay_name.value = ''
}
//回到顶部
const goTop = () => {
    Essay_ref.value?.scrollTo({ top: 0, behavior: "smooth" });
}
const goBottom = () => {
    Essay_ref.value?.scrollTo({ top: Essay_ref.value.scrollHeight, behavior: "smooth" });
}
</script>

<style scoped lang="scss">
.video {
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;

    .item {
        width: 60%;
        background-color: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;

        .tips {
            position: absolute;
            right: 15vw;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            div {
                margin-bottom: 1vw;
            }
        }

        .other_info {
            .rich_text {
                padding: 1vw;
            }

            .title {
                font-weight: bold;
                font-size: 1.5vw;
                text-align: center;
                margin: 0.5vw 0;


            }

            .base_info {
                display: flex;
                justify-content: space-between;
                margin-top: 1vw;

                .left {
                    display: flex;
                    align-items: center;
                    font-size: 1vw;
                }

                .right {
                    display: flex;

                    .items {
                        display: flex;
                        align-items: center;
                        margin-right: 0.1vw;
                        justify-content: flex-end;
                        font-size: 1.2vw;
                        font-weight: bold;
                    }
                }
            }
        }

        .send {
            margin-top: 1vw;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 1vh;


            .top {
                width: 50%;
                display: flex;
                align-items: center;
                background-color: #F1FAEE;
                border-bottom: 2px dashed orange;

                img {
                    width: 8%;
                }

                span {
                    margin-left: 1vw;
                    font-size: 1vw;
                }
            }

            .data {
                width: 50%;
                background-color: #F1FAEE;
                padding: 1vw;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 10px;
                overflow: hidden;

                .el-input {
                    width: 100%;
                    font-size: 1vw;

                }
            }
        }
    }
}
</style>